<template>
	<view class="m-cell " @click="click" :style="[cellStyle]">
		<view class="m-cell-head flex-between">
			<view class="m-cell-head-left flex" :style="{width: leftWidth + 'rpx'}">
				<template v-if="lIcon">
					<m-icon :type="lIcon" spa="0 15 0 0" :wh="lIconSize" :color="lIconColor"></m-icon>
				</template>
				<slot name="left"></slot>
			</view>
			<view class="m-cell-head-center flex">
				<view class="m-cell-head-center-left" v-if="title || des">
					<view class="m-cell-head-center-title" v-if="title">
						{{title || ''}}
					</view>
					<view class="m-cell-head-center-des" v-if="des">
						{{des || ''}}
					</view>
				</view>
				<slot name="center"></slot>
			</view>
			<view class="m-cell-head-right flex">
				<text v-if='rightText'>{{rightText }}</text>
				<slot name="right"></slot>
				<m-icon v-if='rIcon' spa="0 0 0 15" wh="28" color="var(--text)" :type="rIcon"></m-icon>
			</view>
		</view>
		<view class="m-cell-content">
			<slot name="content"></slot>
			<text class="m-cell-content-text" v-if="content">
				{{content || ''}}
			</text>
		</view>
	</view>
</template>

<script>
	/**
	 * m-cell 单元格
	 * @description 一般用于一组列表的情况，比如个人中心页，设置页等。
	 *  property { String } 		title			左侧文本内容
	 *  property { String } 		des				左侧本子描述
	 *  property { String } 		content			底部大内容
	 *  property { String } 		lIcon			左侧图标
	 *  property { String } 		rightText		右侧文本
	 *  property { String } 		rIcon			右侧图标
	 *  property { String,Number } 	border			底部分割线  默认1   单位rpx
	 *  property { Boolen } 		tapMode			是否出现点击态
	 *  */
	import mixin from "../../libs/mixin/mixin.js"
	export default {
		name: "m-cell",
		mixins: [mixin],
		props: {
			gap:{
				type: String,
				default: '27'
			},
			title: {
				type: String,
				default: ''
			},
			des: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			//左侧图标
			lIcon: {
				type: String,
				default: ''
			},
			lIconSize:{
				type: String,
				default: '36'
			},
			lIconColor:{
				type: String,
				default: ''
			},
			rightText: {
				type: [String, Boolean],
				default: false
			},
			rIcon: {
				type: [String, Boolean],
				default: 'icon-qianjin'
			},
			border: {
				type: [String, Number],
				default: '1'
			},
			borderType: {
				type: String,
				default: 'solid'
			},
			tapMode: {
				type: Boolean,
				default: false
			},
			leftWidth: {
				type: [Number,String],
				default: ''
			},
		},
		methods: {
			click() {
				this.$emit("click")
			},
		},
		computed: {
			cellStyle() {
				return {
					...this.style,
					'border':`0rpx ${this.borderType} var(--border)`,
					'border-bottom-width': this.border + 'rpx'
				}
			},
		},
	}
</script>

<style lang="scss">
	.m-cell {
		border-bottom-color: var(--border);
		border-bottom-style: solid;
		
		// &:active{
		// 	&:before{
		// 		opacity: .05;
		// 	}
		// }
		// &:before {
		// 	content: "";
		// 	display: block;
		// 	position: absolute;
		// 	z-index: 9;
		// 	top: 50%;
		// 	left: 50%;
		// 	width: 100%;
		// 	height: 100%;
		// 	background: #000;
		
		// 	border: inherit;
		// 	border-color: #000;
		// 	border-radius: inherit;
		// 	transform: translate(-50%, -50%);
		// 	opacity: 0;
			
		// }
		&-head {
			&-left{
			}
			&-center {
				flex: 1;
				text-align: left;
				&-left{
					padding-right: 15rpx;
				}
				&-title{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: var(--text);
				}
				&-des{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					padding-top: 15rpx;
					color: var(--text_1);
				}
			}
			&-right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: var(--text);

			}
		}
		
		&-content{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #767676;
			
			&-text{
				display: inline-block;
				padding-top: 20rpx;
				
				
			}
		}


	}
</style>